<!--  -->
<template>
    <div class="login">
        <div class="login1">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-col :gutter="20">
                        <el-col :gutter="16">
                            <el-input v-model="ruleForm.code"></el-input>
                        </el-col>
                        <el-col :gutter="6">
                            <el-image
                                @click="handleCaptchaImage"
                                style="width: 100px; height: 100px"
                                :src="url"
                                fit="fill"
                            ></el-image>
                        </el-col>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-button @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { login, getCaptchaImage } from '@/api/login'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            ruleForm: {
                username: '', //用户名
                password: '', //密码
                code: '', //验证码
                uuid: ''
            },
            url: '',
            rules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }
                ],
                code: [
                    {
                        // type: 'date',
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // alert('submit!')
                    // console.log(this.ruleForm)
                    // login(this.ruleForm).then((res) => {
                    //     console.log(res)
                    // })
                    const result = await login(this.ruleForm)
                    if (result.data.code == 200) {
                        this.$router.push('/home')
                        localStorage.setItem('token', result.data.token)
                        console.log(result.data.token)
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        handleCaptchaImage() {
            getCaptchaImage().then((res) => {
                this.url = 'data:image/png;base64,' + res.data.img
                this.ruleForm.uuid = res.data.uuid
            })
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.handleCaptchaImage()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: url('https://img1.baidu.com/it/u=1728608870,345860945&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500')
        no-repeat center center;
    .login1 {
        width: 500px;
        height: 300px;
        background: rgba(255, 255, 255, 0.5);
    }
}
</style>